<template>
  <div id="home">
    <div id="Navbar">
      <nav class="nav-items">
        <a href="#award-about" class="nav-item active">关于评选</a>
        <a href="#award-apply" class="nav-item">报名参评</a>
        <a href="#award-system" class="nav-item">评选机制</a>
        <a href="#award-flow" class="nav-item">参评流程</a>
        <a href="#winners" class="nav-item">获奖名单</a>
        <a href="https://wallstreetcn.com/topics/1000770?ivk=1" class="nav-item">新闻报道</a>
        <a href="#organize" class="nav-item">组织架构</a>
        <a href="#connect-us" class="nav-item">联系我们</a>
      </nav>
    </div>
    <div class="main-body">
      <section class="page-part" id="award-about">
        <h2 class="">关于金融领军者评选</h2>
        <p>华尔街见闻发起主办的金融领军者评选，旨在遴选年度金融领域表现最为强劲的领军者，为全行业树立标杆，打造中国金融界最具价值的评价平台。</p>
        <p>本次评选拟打造中国首个“原生”金融评选，首次将企业参评资料与大数据分析相结合，整合线上投票与线下专家评审，共同形成最终评选结果。本次评选将为行业提供极具价值的参考典范，为中国金融业前行再续动力。</p>
        <video-wrapper />
      </section>
      <section class="page-part" id="award-apply">
        <h2>报名参评</h2>
        <a href="#" class="apply-button" @click.prevent="showForm"><img src="../assets/button.png" alt=""></a>
        <p class="apply-attention">*报名须知：组委会会根据联系信息在2个工作日内与您取得联系，完成参评表单填写及后续流程。</p>
      </section>
      <section class="page-part" id="award-apply-fixed">
        <div class="container">
          <p class="apply-attention">*报名须知：组委会会根据联系信息在2个工作日内与您取得联系，完成参评表单填写及后续流程。</p>
          <a class="apply-button" @click.prevent="showForm"><img src="../assets/button-bottom.png" alt=""></a>
        </div>
      </section>
      <section class="page-part" id="award-range">
        <h2>评选范围</h2>
        <img class="body-img" src="../assets/award-range.jpg" alt="">
      </section>
      <section class="page-part" id="award-system">
        <h2>评选机制</h2>
        <img class="body-img" src="../assets/award-system.jpg" alt="">
        <img class="body-img diamonds" src="../assets/award-system-2.gif" alt="">
        <router-link to="/award" target="_blank">查看具体奖项设置</router-link>
      </section>
      <section class="page-part" id="award-flow">
        <h2>参评流程</h2>
        <img class="body-img" src="../assets/award-flow.jpg" alt="">
      </section>

      <vote></vote>

      <section class="page-part" id="award-what">
        <h2>新闻报道</h2>
        <div class="articles-wrapper">
          <a class="article-item" href="https://wallstreetcn.com/articles/3046668" target="_blank">
            <img src="https://wpimg.wallstcn.com/78567fd3-9c35-4776-9438-3a1683cbe621.png?imageView2/1/w/240/h/192" alt="" class="article-img">
            <div class="article-title">
              <div class="title-main">华尔街见闻2017金融领军者评选奖项名单揭晓</div>
            </div>
          </a>
          <a class="article-item" href="https://wallstreetcn.com/articles/3046848" target="_blank">
            <img src="https://wpimg.wallstcn.com/62aabe7c-ee50-4c81-8f55-8db20aad2f79.png?imageView2/1/w/240/h/192" alt="" class="article-img">
            <div class="article-title">
              <div class="title-main">中国民生银行小微金融斩获“年度卓越品牌营销活动银行”奖</div>
            </div>
          </a>
          <a class="article-item" href="https://wallstreetcn.com/articles/3046837" target="_blank">
            <img src="https://wpimg.wallstcn.com/9218e755-b353-40e9-9d8f-cbe3c451a0a4.png?imageView2/1/w/240/h/192" alt="" class="article-img">
            <div class="article-title">
              <div class="title-main">兴业研究获华尔街见闻“年度最具影响力金融研究机构”</div>
            </div>
          </a>
          <a class="article-item" href="https://wallstreetcn.com/articles/3047038" target="_blank">
            <img src="https://wpimg.wallstcn.com/fd613c8f-b34c-4e44-912b-c33aef6be308.png?imageView2/1/w/240/h/192" alt="" class="article-img">
            <div class="article-title">
              <div class="title-main">凤凰金融获华尔街见闻“年度卓越金融科技机构”</div>
            </div>
          </a>
          <a class="article-item" href="https://wallstreetcn.com/articles/3046833" target="_blank">
            <img src="https://wpimg.wallstcn.com/dc664cad-0a3f-4576-8a55-97d5caca8669.png?imageView2/1/w/240/h/192" alt="" class="article-img">
            <div class="article-title">
              <div class="title-main">Fintech撬动新金融，未来监管与数据是重点</div>
            </div>
          </a>
        </div>
        <a class="more-article" href="https://wallstreetcn.com/topics/1000770?ivk=1" target="_blank">
          查看更多
        </a>
        <h2>获奖权益</h2>
        <img class="body-img" src="../assets/award-what.jpg" alt="">
      </section>

      <section class="page-part" id="organize">
        <h2 class="black bottom0">组织架构</h2>
        <img class="body-img" src="../assets/organize.jpg" alt="">
      </section>
      <section class="page-part" id="connect-us">
        <h2>联系我们</h2>
        <p>地址: 北京市朝阳区东三环中路 9 号富尔大厦506</p>
        <p>联系电话: 010-86393152 (802)</p>
        <p>联系邮箱: fca@wallstreetcn.com</p>
      </section>
    </div>
    <form-area :isFormShow.sync="isFormShow"></form-area>
  </div>
</template>

<script>
import VideoWrapper from './components/VideoWrapper'
import FormArea from './components/FormArea'
import Vote from './components/Vote'

export default {
  name: 'home',
  components: {
    FormArea,
    VideoWrapper,
    Vote
  },
  created() {
    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
      this.$router.push('/m')
    }
  },
  data() {
    return {
      mobile: false,
      isFormShow: false
    }
  },
  methods: {
    showForm() {
      this.isFormShow=true
    }
  }
}
</script>

<style scoped lang="scss">
.more-article{
  color: #EDD498;
  font-size: 20px;
  text-align: center;
  padding: 20px 0 50px;
}
.articles-wrapper{
  display: flex;
  width: 100%;
  justify-content: center;
  .article-item {
    margin: 0 5px;
    width: 240px;
    display: inline-block;
    background-color: #fff;
    .article-img {
      display: block;
      width: 100%;
      height: 182px;
    }
    .article-title {
      height: 70px;
      font-size: 15px;
      padding: 12px 16px 0px;
      .title-main {
        height: 44px;
        display: block;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-all;
        overflow: hidden;
      }
    }
  }
}
</style>
